<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="违法时间" prop="illegalTime">
				<el-date-picker clearable size="small" style="width: 200px" v-model="queryParams.illegalTime" type="date" value-format="yyyy-MM-dd" placeholder="选择违法时间">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="位置信息" prop="locationInformation">
				<el-input v-model="queryParams.locationInformation" placeholder="请输入位置信息" clearable size="small" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="辖区" prop="jurisdiction">
				<el-input v-model="queryParams.jurisdiction" placeholder="请输入辖区" clearable size="small" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="违法类型" prop="illegalType">
				<el-select v-model="queryParams.illegalType" placeholder="请选择违法类型" clearable size="small">
					<el-option v-for="dict in illegalTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item label="业务编号" prop="professionalId">
				<el-input v-model="queryParams.professionalId" placeholder="请输入业务编号" clearable size="small" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<!--<el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
					<el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
				</el-select>-->
				<el-radio-group v-model="queryParams.status" @change="handleQuery" size="small">
					<el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="parseInt(dict.dictValue)" border>{{dict.dictLabel}}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['manage:order:export']">导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="违法单号" align="center" prop="professionalId" />
			<el-table-column label="违法时间" align="center" prop="illegalTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.illegalTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="位置信息" align="center" prop="locationInformation" />
			<el-table-column label="辖区" align="center" prop="jurisdiction" />
			<el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
			<el-table-column label="违法类型" align="center" prop="illegalType" :formatter="illegalTypeFormat" />
			<el-table-column label="创建时间" align="center" prop="illegalTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['manage:order:edit']">审核</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 添加或修改违法举报信息对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body class="addeditbox">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px" :inline="true">
				<!--<el-form-item label="违法单号" prop="professionalId">
					<el-input v-model="form.professionalId" />
				</el-form-item>-->

				<el-form-item label="违法时间" prop="illegalTime">
					<el-date-picker clearable size="small" style="width: 100%" v-model="form.illegalTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择违法时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="手机号" prop="phone">
					<el-input v-model="form.phone" />
				</el-form-item>
				<el-form-item label="位置信息" prop="locationInformation" style="width: 100%;" class="location">
					<el-input v-model="form.locationInformation" style="width: 100%;"/>
				</el-form-item>
				<el-form-item label="举报图片" v-if="images.length != 0" style="width: 100%;">
					<div style="display: flex;">
						<el-image v-for="image in images" style="width: 100px; height: 100px;padding: 10px" :src="image.url" :preview-src-list="image.imageList"></el-image>
					</div>
				</el-form-item>

				<el-form-item label="举报视频" v-if="videoImages.length != 0" style="width: 100%;">
					<div style="display: flex;">
						<template v-for="image in videoImages">
							<div style="width:100px; position: relative" @click="videoPlay(image.videoUrl)">
								<i class="el-icon-video-play" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 999;color: #fff; font-size: 32px;"></i>
								<el-image style="width: 100px; height: 100px" :src="image.url"></el-image>
							</div>
						</template>
					</div>
				</el-form-item>
				<!--<el-form-item label="辖区" prop="jurisdiction">
					<el-input v-model="form.jurisdiction" />
				</el-form-item>-->

				<el-form-item label="违法类型" prop="illegalType">
					<el-select v-model="form.illegalType">
						<el-option v-for="dict in illegalTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="parseInt(dict.dictValue)"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="车牌类型" prop="carType">
					<el-select v-model="form.carType">
						<el-option v-for="dict in carTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="parseInt(dict.dictValue)"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="车牌号码" prop="carNumber">
					<el-input v-model="form.carNumber" />
				</el-form-item>

				<!--        <template v-for="image in videoImages">-->
				<!--          <div>-->
				<!--            <i class="el-icon-video-play"></i>-->
				<!--            <el-image style="width: 100px; height: 100px"  :src="image.url" @click="videoPlay(image.videoUrl)"></el-image>-->
				<!--          </div>-->
				<!--        </template>-->

				<el-dialog title :visible.sync="dialogPlay" width="30%" @close="closeDialog" append-to-body class="videobox">
					<video :src="videoUrl" controls autoplay class="video" width="100%" height="500px"></video>
				</el-dialog>
				<el-form-item label="举报人姓名" prop="reportName">
					<el-input v-model="form.reportName" />
				</el-form-item>
				<!--<el-form-item label="身份证号" prop="idNumber">
					<el-input v-model="form.idNumber" />
				</el-form-item>-->

				<el-form-item label="举报内容">
					<el-input type="textarea" v-model="form.content"></el-input>
				</el-form-item>

				<el-form-item label="状态" style="width: 100%;">
					<el-radio-group v-model="form.status">
						<el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="parseInt(dict.dictValue)">{{dict.dictLabel}}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-show="form.status == 2" label="驳回原因" prop="dismissReason">
					<el-input type="textarea" v-model="form.dismissReason" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import { listOrder, getOrder, delOrder, addOrder, updateOrder, exportOrder } from "@/api/manage/order";
	import Editor from '@/components/Editor';

	export default {
		name: "Order",
		components: {
			Editor
		},
		data() {
			return {
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 违法举报信息表格数据
				orderList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 状态字典
				statusOptions: [],
				// 违法类型字典
				illegalTypeOptions: [],
				//车牌类型
				carTypeOptions: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					illegalTime: null,
					locationInformation: null,
					jurisdiction: null,
					status: 0,
					illegalType: null,
					professionalId: null,
				},
				// 表单参数
				form: {},
				//图片，视频
				images: [],
				videoImages: [],
				videoList: [],
				videoImage: {
					url: "",
					videoUrl: ""
				},
				videoUrl: "",
				dialogPlay: false,
				image: {},
				// 表单校验
				rules: {},
				status: '0'
			};
		},
		created() {
			this.getList();
			this.getDicts("break_law_status").then(response => {
				this.statusOptions = response.data;
			});
			this.getDicts("break_law_type").then(response => {
				this.illegalTypeOptions = response.data;
			});
			this.getDicts("car_type").then(response => {
				this.carTypeOptions = response.data;
			});
		},
		methods: {
			/** 查询违法举报信息列表 */
			getList() {
				this.loading = true;
				listOrder(this.queryParams).then(response => {
					this.orderList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 状态字典翻译
			statusFormat(row, column) {
				return this.selectDictLabel(this.statusOptions, row.status);
			},
			// 违法类型字典翻译
			illegalTypeFormat(row, column) {
				return this.selectDictLabel(this.illegalTypeOptions, row.illegalType);
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					pictureList: null,
					video: null,
					illegalTime: null,
					locationInformation: null,
					jurisdiction: null,
					status: 0,
					dismissReason: null,
					deptId: null,
					illegalType: null,
					professionalId: null,
					openId: null,
					createTime: null,
					updateTime: null,
					content: null,
					carType: null,
					carNumber: null,
					reportName: null,
					professionalId: null,
					videoImageList: null

				};

				this.images = [];
				this.image = {};
				this.videoList = [];
				this.videoImages = [];
				this.resetForm("form");
				
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加违法举报信息";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids
				getOrder(id).then(response => {
					this.form = response.data;

					if(response.data.pictureList != null && response.data.pictureList != "") {
            let imagesUrl = response.data.pictureList.split(",");
						for(let i = 0; i < imagesUrl.length; i++) {
							let url1 = imagesUrl[i];
							let image = {};
							image.url = process.env.VUE_APP_IMAGE_API + url1;
							let imageList = [];
							for(let i = 0; i < imagesUrl.length; i++) {
								let url = process.env.VUE_APP_IMAGE_API + imagesUrl[i]
								if(image.url == url) {
									imageList.unshift(url);
								} else {
									imageList.push(url);
								}
							}
							image.imageList = imageList;
							this.images.push(image);
						}
					}

					if(response.data.videoImageList != null && response.data.videoImageList !='') {
						let videoImagesUrl = response.data.videoImageList.split(",");
						let videosUrl = response.data.video.split(",");
						for(let i = 0; i < videoImagesUrl.length; i++) {
							let url = videoImagesUrl[i];
							let videoImage = {};
							videoImage.url = process.env.VUE_APP_IMAGE_API + url;

							videoImage.videoUrl = process.env.VUE_APP_IMAGE_API + videosUrl[i];
							this.videoImages.push(videoImage);

						}
					}

					this.open = true;
					this.title = "审核违法举报信息";
				});
			},
			/** 视频播放 */
			videoPlay(videoUrl) {
				console.log(videoUrl);
				this.dialogPlay = true;
				this.videoUrl = videoUrl;
			},
			closeDialog() {
				this.videoUrl = ""; //清空数据 关闭视频播放
			},
			/** 提交按钮 */
			submitForm() {
				console.log(this.form.dismissReason)
				if(this.form.status == 2){
					if(this.form.dismissReason == '' || this.form.dismissReason == null){
						this.$message.error('请填写驳回原因');
					}else{
						this.$refs["form"].validate(valid => {
							if(valid) {
								if(this.form.id != null) {
									updateOrder(this.form).then(response => {
										this.msgSuccess("修改成功");
										this.open = false;
										this.getList();
									});
								} else {
									addOrder(this.form).then(response => {
										this.msgSuccess("新增成功");
										this.open = false;
										this.getList();
									});
								}
							}
						});
					}
				}else{
					this.$refs["form"].validate(valid => {
						if(valid) {
							if(this.form.id != null) {
								updateOrder(this.form).then(response => {
									this.msgSuccess("修改成功");
									this.open = false;
									this.getList();
								});
							} else {
								addOrder(this.form).then(response => {
									this.msgSuccess("新增成功");
									this.open = false;
									this.getList();
								});
							}
						}
					});
				}			
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$confirm('是否确认删除违法举报信息编号为"' + ids + '"的数据项?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function() {
					return delOrder(ids);
				}).then(() => {
					this.getList();
					this.msgSuccess("删除成功");
				})
			},
			/** 导出按钮操作 */
			handleExport() {
				const queryParams = this.queryParams;
				this.$confirm('是否确认导出所有违法举报信息数据项?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function() {
					return exportOrder(queryParams);
				}).then(response => {
					this.download(response.msg);
				})
			}
		},

	};
</script>

<style>
	.addeditbox .el-form-item{
		width: 48%;
		display: inline-block;
	}
	.addeditbox .el-form-item__content{
		width: calc(100% - 100px);
	}
	.addeditbox .el-select,.el-select--medium{
		width: 100%;
	}
	.location .el-form-item__content{
		width: calc(100% - 115px);
	}
	.el-dialog__body {
    padding: 30px 20px 0;
	}
	.videobox .el-dialog__body {
    padding: 20px;
	}
</style>
